<template>
	<div class="orderList zy-content">
		<div class="searchBox search-box-layout mb16">
			<Row :gutter="24">
				<Col span="4">
					<div>
						<p class="label">模具编号:</p>
						<div class="ipt">
							<Input type="text" v-model="searchParams.moldCode" :placeholder="`${$t('common.inputInfo')}`"></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">模具名称:</p>
						<div class="ipt">
							<Input type="text" v-model="searchParams.moldName" :placeholder="`${$t('common.inputInfo')}`"></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">维修单号:</p>
						<div class="ipt">
							<Input type="text" v-model="searchParams.repairOrderNo" :placeholder="`${$t('common.inputInfo')}`"></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">维修人:</p>
						<div class="ipt">
							<Input type="text" v-model="searchParams.repairedByName" :placeholder="`${$t('common.inputInfo')}`"></Input>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">异常现象:</p>
						<div class="ipt">
							<Cascader v-model="searchParams.abnormalPhenomena" :data="abnormalList"></Cascader>
							<!-- <Select v-model="searchParams.categoryName" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of abnormalList" :value="item" :key="index" :label="item"></Option>
            </Select> -->
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">模具等级:</p>
						<div class="ipt">
							<Select v-model="searchParams.moldGrade" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option value="A" label="A"></Option>
								<Option value="B" label="B"></Option>
								<Option value="C" label="C"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">维修级别:</p>
						<div class="ipt">
							<Select v-model="searchParams.urgencyLevel" clearable :placeholder="`${$t('common.selectInfo')}`">
								<Option v-for="(item, index) of levels" :value="item.value" :key="index" :label="item.label"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">功能位置:</p>
						<div class="ipt">
							<Cascader v-model="searchParams.workShop" :data="orgList"></Cascader>
							<!-- <Select v-model="searchParams.categoryName" clearable :placeholder="`${$t('common.selectInfo')}`">
              <Option v-for="(item, index) of abnormalList" :value="item" :key="index" :label="item"></Option>
            </Select> -->
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button class="search-btn" type="primary" @click="search">{{ $t('common.Query') }}</Button>
							<Button class="reset-btn" @click="reset">{{ $t('common.reset') }} </Button>
						</div>
					</div>
				</Col>
				<Col span="8"> </Col>
				<Col span="4">
					<div class="t-r">
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button class="reset-btn" style="max-width: 300px; width: auto" @click="addOrderClick">{{ $t('fault.NewWorkOrder') }}</Button>
						</div>
					</div>
				</Col>
			</Row>
		</div>
		<div class="loading-bg" v-if="loading" @click="loadingWarning"></div>
		<!-- {{ searchParams.maintenanceStatus }} -->
		<Tabs class="tabs-layout mb16" :value="searchParams.maintenanceStatus" @on-click="onTabs" :key="tabsKey">
			<TabPane :label="label1" name="1"></TabPane>
			<TabPane :label="label2" name="2"></TabPane>
			<TabPane :label="label3" name="3"></TabPane>
			<TabPane :label="label4" name="4"></TabPane>
			<TabPane :label="label5" name="5"></TabPane>
			<TabPane :label="label6" name="6"></TabPane>
			<TabPane :label="label7" name="7"></TabPane>
			<TabPane :label="label8" name="8"></TabPane>
			<TabPane :label="label9" name="10"></TabPane>
		</Tabs>
		<div class="wrap">
			<div class="item" v-for="order in list" :key="order.id">
				<!-- <div class="item" v-for="order in list" :key="order.id"> -->
				<orderStatusIcon :status="searchParams.maintenanceStatus" />
				<div class="name">
					<div class="name-img">
						<!-- <span>{{ ['label'+searchParams.maintenanceStatus] }}123123</span> -->
					</div>
					<p>{{ order.moldCode }}</p>
					<p>{{ order.moldName }}</p>
					<!-- <p>
            {{
              order.workOrderStatus == 0 ||
              order.workOrderStatus == -1 ||
              order.workOrderStatus == 1
              ? order.maintainApplyByStr
              : order.receiveOrderByStr
            }}
            {{
              order.workOrderStatus == 0 ||
              order.workOrderStatus == -1 ||
              order.workOrderStatus == 1
              ? "（报修人）"
              : "（主要维修）"
            }}
          </p> -->
				</div>
				<div style="min-height: 26px">
					<Tag color="red">{{ order.urgencyLevel == 1 ? '特急' : order.urgencyLevel == 2 ? '紧急' : '一般' }}</Tag>
					<Tag color="blue">{{ searchParams.maintenanceStatus == '10' ? '已升级' : '未升级' }}</Tag>
					<Tag color="volcano" v-if="order.abnormalPhenomena.includes('模具异常')">模具异常</Tag>
					<Tag color="volcano" v-if="order.abnormalPhenomena.includes('品质异常')">品质异常</Tag>
					<Tag color="red">{{ order.effectProduct ? '影响生产' : '不影响生产' }}</Tag>
				</div>
				<div class="details">
					<div class="formItem">
						<!--维修单号：-->
						<div class="label">{{ $t('fault.RepairFormNumber') }}：</div>
						<div class="value num" @click="handleWorkNumDetail(order)">
							{{ order.repairOrderNo }}
						</div>
					</div>
					<div class="formItem">
						<div class="label">班组：</div>
						<div class="value">{{ order.team }}</div>
					</div>
					<div class="formItem">
						<div class="label">班次：</div>
						<div class="value">{{ order.shift }}</div>
					</div>
					<div class="formItem">
						<div class="label">具体位置：</div>
						<div class="value">{{ order.punchNumber }}</div>
					</div>
					<div class="formItem">
						<div class="label">异常现象：</div>
						<div class="value">{{ order.abnormalPhenomena }}</div>
					</div>
					<!-- <div class="formItem">
						<div class="label">异常描述：</div>
						<div class="value over-wrapper">{{ order.exceptionDescription }}</div>
					</div> -->
					<div class="formItem">
						<div class="label">异常描述：</div>
						<!-- <div class="desc-value">{{ item.materialCode }}</div> -->
						<Tooltip style="width: 100%;" :content="order.exceptionDescription">
							<div style="width: 100%; font-size: 12px" class="value over-wrapper">{{ order.exceptionDescription }}</div>
						</Tooltip>
						<!-- <Tooltip class="value over-wrapper" :content="order.exceptionDescription">{{ order.exceptionDescription }}</Tooltip> -->
						<!-- <Tooltip class="desc-toop-value" :content="item.materialCode">
                {{item.materialCode}}
              </Tooltip> -->
					</div>
					<div class="formItem">
						<div class="label">故障时间：</div>
						<div class="value over-wrapper">{{ order.faultTime }}</div>
					</div>
					<!-- <div class="formItem" v-if="order.backupStatus">
            <div class="label">{{ $t("备件采购状态") }}：</div>
            <div class="value over-wrapper backupStatus" :class="{
              backupStatus1: order.backupStatus == 1,
              backupStatus2: order.backupStatus == 2,
              backupStatus3: order.backupStatus == 3,
            }">
              <span></span>{{ backupStatusList[order.backupStatus] }}
            </div>
          </div> -->
					<div class="preview" v-if="order.uploadAttachments && order.uploadAttachments.length">
						<Badge :count="order.uploadAttachments ? order.uploadAttachments.length : 0">
							<div class="preview-img">
								<div
									class="itemCol"
									v-for="(item, index) in order.uploadAttachments"
									@click="previewClicjk(item, index, order.uploadAttachments)"
									:key="index"
								>
									<span class="item">
										<template v-if="!item.filePath.includes('video')">
											<img :src="util.filePathToUrl(item.filePath)" alt="" />
										</template>
										<template>
											<video preload="auto" loop autoplay muted>
												<source :src="util.filePathToUrl(item.filePath)" type="video/mp4" />
											</video>
										</template>
									</span>
								</div>
							</div>
						</Badge>
					</div>
					<!-- 维修确认 -->
					<div class="btnF" v-if="searchParams.maintenanceStatus == '1'">
						<Button type="default" v-has="'moldServiceEdit'" class="black" ghost @click="handleEdit(order)" :loading="outLoading">
							{{ $t('编辑') }}
						</Button>
						<Button type="error" v-has="'moldServiceDel'" ghost @click="handleDeleteModal(order)">
							{{ $t('common.Delete') }}
						</Button>
						<Button class="blue" v-has="'1moldServiceConfirm'" type="primary" ghost @click="handleRepair(order.id, 'confirmFaultCodeShowF')">
							{{ $t('确认') }}
						</Button>
					</div>
					<!-- 待模修确认 -->
					<div class="btnF" v-if="searchParams.maintenanceStatus == '2'">
						<Button
							type="default"
							v-has="'1moldServiceRej'"
							class="black"
							ghost
							@click="handleCommonReject(order, '2', 'maintainRejectDesc')"
							:loading="outLoading"
						>
							{{ $t('fault.Reject') }}
						</Button>
						<Button class="blue" v-has="'2moldServiceConfirm'" type="primary" ghost @click="handleRepair(order.id, 'confirmStatu2')">
							{{ $t('确认') }}
						</Button>
					</div>
					<!-- 待品质确认 -->
					<div class="btnF" v-if="searchParams.maintenanceStatus == '3'">
						<Button
							type="default"
							v-has="'2moldServiceRej'"
							class="black"
							ghost
							@click="handleCommonReject(order, '3', 'MQualityRejectReason')"
							:loading="outLoading"
						>
							{{ $t('fault.Reject') }}
						</Button>
						<Button
							class="blue"
							type="primary"
							ghost
							v-has="'3moldServiceConfirm'"
							@click="handleCommonReject(order, '3-confirm', 'mQualityExceptionDesc', true)"
						>
							{{ $t('确认') }}
						</Button>
					</div>
					<!-- 送修确认 -->
					<div class="btnF" v-if="searchParams.maintenanceStatus == '4'">
						<template v-if="order.productReveiveTime == null">
							<Button type="default" class="black" v-has="'moldServiceEdit'" ghost @click="handleEdit(order)" :loading="outLoading">
								{{ $t('编辑') }}
							</Button>
							<Button class="blue" type="primary" v-has="'moldServiceArrive'" ghost @click="confirm(order.id, '4-arrive')"> 确认送达 </Button>
						</template>
						<template v-else>
							<Button
								type="default"
								class="black"
								v-has="'3moldServiceRej'"
								ghost
								@click="handleCommonReject(order, '3', 'MQualityRejectReason')"
								:loading="outLoading"
							>
								{{ $t('fault.Reject') }}
							</Button>
							<Button class="blue" v-has="'moldServiceRec'" type="primary" ghost @click="confirm(order.id, '4-confirm')"> 确认收货 </Button>
						</template>
					</div>
					<div class="btnF" v-if="searchParams.maintenanceStatus == '5'">
						<Button class="black" @click="brforeDispath(order)" v-has="'moldServiceBrforeDispath'">
							{{ $t('fault.Allocate') }}
						</Button>
						<Button class="blue" type="primary" v-has="'moldServiceService'" ghost @click="confirm(order.id, '5')"> 接单 </Button>
					</div>
					<div class="btnF" v-if="searchParams.maintenanceStatus == '6'">
						<Button class="black" @click="brforeDispath(order, true)" v-has="'moldServiceTrans'">
							{{ $t('fault.TransferOrder') }}
						</Button>
						<Button type="primary" class="blue" @click="handleConfirmOrder(order)" v-has="'moldServiceConfirm'"> 维修完成 </Button>
					</div>
					<div class="btnF" v-if="searchParams.maintenanceStatus == '7'">
						<Button type="primary" class="blue" v-has="'moldServiceAccept'" @click="handleRepair(order.id, 'confirmStatu3')"> 验收 </Button>
						<!-- <Button type="primary" class="blue" v-has="'moldServiceAccept'" @click="handleConfirmOrder(order)">
              验收
            </Button> -->
					</div>
					<div class="btnF" v-if="searchParams.maintenanceStatus == '10'">
						<Button class="black" @click="brforeDispath(order)" v-has="'moldServiceBrforeDispath'">
							{{ $t('fault.Allocate') }}
						</Button>
						<Button class="blue" v-has="'moldServiceService'" type="primary" ghost @click="confirm(order.id, '5')"> 接单 </Button>
					</div>
				</div>
			</div>
		</div>
		<div class="pageWrap mt16" v-if="total > 0">
			<Page
				:total="total"
				:page-size="pageSize"
				:page-size-opts="$variable.pageSizes"
				:current="pageNum"
				@on-change="changePageNum"
				@on-page-size-change="changePageSize"
				show-sizer
				show-total
			/>
		</div>
		<!--选择单个人员-->
		<signle-member-modal ref="signleMemberModal" @handleRefresh="handleRefresh" />

		<!--确认提醒-->
		<!--        <order-detail-modal ref="orderDetailModal" @handleRefresh="handleRefresh"/>-->
		<AddModal ref="addModal" @refresh="handleRefresh" @handleRecive="handleRecive" @handleDispath="handleDispath" />
		<!-- 待生产确认 -->
		<Modal :mask-closable="false" class="modal-title-layout" v-model="confirmFaultCodeShowF" :title="`${$t('fault.Confirmremind')}`">
			<Form ref="statu1Form" :model="statu1Form" label-position="top">
				<FormItem label="是否自行维修完成" prop="isRepairMyself" :rules="{ required: true, message: '请选择' }">
					<RadioGroup v-model="statu1Form.isRepairMyself">
						<Radio :label="1">是</Radio>
						<Radio :label="0">否</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem
					label="拆模类型"
					prop="demoldingType"
					v-if="statu1Form.isRepairMyself == 0"
					:rules="{ required: true, message: '请选择拆模类型', trigger: 'change' }"
				>
					<Select v-model="statu1Form.demoldingType" clearable @on-change="teamChange" :placeholder="`${$t('common.selectInfo')}`">
						<Option v-for="(item, index) of demoList" :value="item.value" :key="index">{{ item.label }} </Option>
					</Select>
				</FormItem>
				<FormItem
					label="维修方法"
					prop="repairWay"
					v-if="statu1Form.isRepairMyself == 1"
					:rules="{ required: true, message: '请输入维修方法', trigger: 'blur' }"
				>
					<Input v-model="statu1Form.repairWay" :placeholder="`${$t('common.inputInfo')}维修方法`" clearable />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="default" @click="confirmFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="repairLoading" @click="commonConfirm('statu1Form', 'statu1Form', '1', 'confirmFaultCodeShowF')"
					>{{ $t('maintenance.Confirmed') }}
				</Button>
			</div>
		</Modal>
		<!--待模修确认 -->
		<Modal :mask-closable="false" class="modal-title-layout" v-model="confirmStatu2" :title="`${$t('fault.Confirmremind')}`">
			<Form ref="statu2Form" :model="statu2Form" label-position="top">
				<FormItem label="是否现场维修完成" prop="isRepairMyself" :rules="{ required: true, message: '请选择' }">
					<RadioGroup v-model="statu2Form.isRepairMyself">
						<Radio :label="1">是</Radio>
						<Radio :label="0">否</Radio>
					</RadioGroup>
				</FormItem>
				<FormItem
					label="模具异常情况描述"
					prop="moldExceptionDesc"
					v-if="statu2Form.isRepairMyself == 0"
					:rules="{ required: false, message: '模具异常情况描述', trigger: 'blur' }"
				>
					<Input type="textarea" v-model="statu2Form.moldExceptionDesc" :placeholder="`${$t('common.inputInfo')}模具异常情况描述`" clearable />
				</FormItem>
				<FormItem
					label="维修方法"
					prop="repairWay"
					v-if="statu2Form.isRepairMyself == 1"
					:rules="{ required: true, message: '请输入维修方法', trigger: 'blur' }"
				>
					<Input v-model="statu2Form.repairWay" :placeholder="`${$t('common.inputInfo')}维修方法`" clearable />
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="default" @click="confirmStatu2 = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="repairLoading" @click="commonConfirm('statu2Form', 'statu2Form', '2', 'confirmStatu2')"
					>{{ $t('maintenance.Confirmed') }}
				</Button>
			</div>
		</Modal>
		<!--验收 -->
		<Modal :mask-closable="false" class="modal-title-layout" v-model="confirmStatu3" title="验收">
			<Form ref="statu3Form" :model="statu3Form" label-position="top">
				<FormItem label="" prop="acceptType" :rules="{ required: true, message: '请选择' }">
					<RadioGroup v-model="statu3Form.acceptType">
						<Radio label="试模NG">试模NG</Radio>
						<Radio label="完成">完成</Radio>
					</RadioGroup>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="default" @click="confirmStatu3 = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="repairLoading" @click="commonConfirm('statu3Form', 'statu3Form', '3', 'confirmStatu3')"
					>{{ $t('maintenance.Confirmed') }}
				</Button>
			</div>
		</Modal>
		<!--驳回提醒-->
		<Modal :mask-closable="false" v-model="backFaultCodeShowF" class="modal-title-layout" :title="`${$t('fault.ConfiRejected')}`">
			<div class="icon red">
				<i class="iconfont zy-common-shibai1"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.Pleasereject') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="backFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="backLoading" @click="handleConfirmOk(-1)">{{ $t('maintenance.Confirmed') }} </Button>
			</div>
		</Modal>
		<Modal :mask-closable="false" class="modal-title-layout" v-model="deleteShow" :title="`${$t('common.Delete')}`">
			<div class="icon red">
				<i class="iconfont zy-common-shanchu"></i>
			</div>
			<p class="title">
				<span>{{ $t('common.confirmDelete') }}</span>
			</p>
			<div slot="footer">
				<Button type="default" @click="deleteShow = false">{{ $t('common.Cancle') }}</Button>
				<Button type="primary" :loading="repairLoading" @click="handleDelete">{{ $t('maintenance.Confirmed') }} </Button>
			</div>
		</Modal>
		<gallery :images="galleryImagesList" :index="galleryIndexInfo" @close="galleryIndexInfo = null"></gallery>
		<inputModal ref="inputModal"></inputModal>
		<commonModal ref="commonModal"></commonModal>
	</div>
</template>

<script>
// import orderDetailModal from './modules/orderDetailModal'
import recursion from '@/util/recursion';
import SignleMemberModal from './modules/signleMemberModal';
import AddModal from './modules/addModal';
import VueGallery from 'vue-gallery';
import orderStatusIcon from './modules/orderStatusIcon';
import inputModal from '@/components/modalTypes/inputModal.vue';
import commonModal from '@/components/modalTypes/commonModal.vue';
import { getAbnormalPhenomenaList } from '@/api/moldManagement/abnormalPhenomenaList.js';

export default {
	name: 'orderList',
	components: {
		AddModal,
		SignleMemberModal,
		// orderDetailModal,
		gallery: VueGallery,
		orderStatusIcon,
		inputModal,
		commonModal,
	},
	data() {
		return {
			levels: [
				{ label: '特急', value: '1' },
				{ label: '紧急', value: '2' },
				{ label: '一般', value: '3' },
			],
			abnormalList: getAbnormalPhenomenaList(),
			backupStatusList: {
				1: this.$t('待采购'),
				2: this.$t('采购中'),
				3: this.$t('已到货'),
			},
			deleteShow: false,
			loading: false,
			galleryIndexInfo: null,
			galleryImagesList: [],
			detailId: '',
			repairId: '',
			total: 0,
			pageNum: 1,
			pageSize: 10,
			labelCount1: 0,
			labelCount2: 0,
			labelCount3: 0,
			labelCount4: 0,
			labelCount5: 0,
			labelCount6: 0,
			labelCount7: 0,
			labelCount8: 0,
			labelCount9: 0,
			label1: (h) => {
				return h('div', [
					h('span', '维修确认'),
					h('Badge', {
						props: {
							count: this.labelCount1,
						},
					}),
				]);
			},
			label2: (h) => {
				return h('div', [
					h('span', '待模修确认'),
					h('Badge', {
						props: {
							count: this.labelCount2,
						},
					}),
				]);
			},
			label3: (h) => {
				return h('div', [
					h('span', '待品质确认'),
					h('Badge', {
						props: {
							count: this.labelCount3,
						},
					}),
				]);
			},
			label4: (h) => {
				return h('div', [
					h('span', '送修确认'),
					h('Badge', {
						props: {
							count: this.labelCount4,
						},
					}),
				]);
			},
			label5: (h) => {
				return h('div', [
					h('span', '待分配'),
					h('Badge', {
						props: {
							count: this.labelCount5,
						},
					}),
				]);
			},
			label6: (h) => {
				return h('div', [
					h('span', '维修中'),
					h('Badge', {
						props: {
							count: this.labelCount6,
						},
					}),
				]);
			},
			label7: (h) => {
				return h('div', [
					h('span', '待验收'),
					h('Badge', {
						props: {
							count: this.labelCount7,
						},
					}),
				]);
			},
			label8: (h) => {
				return h('div', [
					h('span', '已结单'),
					h('Badge', {
						props: {
							count: this.labelCount8,
						},
					}),
				]);
			},
			label9: (h) => {
				return h('div', [
					h('span', '升级中'),
					h('Badge', {
						props: {
							count: this.labelCount10,
						},
					}),
				]);
			},
			confirmFaultCodeShowF: false,
			confirmStatu2: false,
			confirmStatu3: false,
			repairLoading: false,
			outLoading: false,
			backFaultCodeShowF: false,
			backLoading: false,
			searchParams: {
				maintenanceStatus: '1',
			},
			orgList: [],
			deviceList: ['A', 'B', 'C'],
			list: [],
			companyList: [], // 所属公司data
			tabsKey: 0,
			tabKey: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
			isOutReject: false,
			lineList: [],
			isRepairReject: false,
			lineType: 999,

			statu1Form: {},
			statu2Form: {},
			statu3Form: {},
			demoList: [
				{ label: '试模NG', value: '1' },
				{ label: '异常发生', value: '2' },
				{ label: '冲次满保养', value: '3' },
				{ label: '生产需要且完成任务', value: '4' },
			],
		};
	},
	created() {
		let status = sessionStorage.getItem('moldRepairStatus');
		if (status) {
			this.onTabs(status);
			// this.searchParams.status = status
			sessionStorage.removeItem('moldRepairStatus');
			// this.$
		} else {
			status = 0;
		}
		// this.tabsKey++

		this.$nextTick(() => {
			document.getElementsByClassName('ivu-tabs-tab')[this.tabKey.indexOf(status / 1)].click();
		});

		this.getCountsList();
		this.getFactory();
		this.getCompanyList();
		this.getOrgList();
		this.getList();
	},
	watch: {
		lineType: function (val) {
			const _list = this.lineList.filter((item) => item.id == val || val == 999);
			this.searchParams.orgCode = val == 999 ? [] : [_list[0].id];
			this.orgList = _list;
			this.search();
		},
	},
	mounted() {},
	methods: {
		confirm(id, status) {
			let url, desc, title;
			if (status == '4-arrive') {
				url = '/dms/moldMaintenanceHall/productReveiveConfirm';
				desc = '确认已将模具送达指定维修地点！';
				title = '送达提醒';
			} else if (status == '4-confirm') {
				url = '/dms/moldMaintenanceHall/repairReveiveConfirm';
				desc = '确认已收到模具，并开始进行维修！';
				title = '收货提醒';
			} else if (status == '5') {
				url = '/dms/moldMaintenanceHall/receive';
				desc = '是否接单请确认!';
				title = '接单提醒';
			}
			this.$refs.commonModal.showModal({
				title: title || '确认',
				type: 'sure',
				desc,
				submit: () => {
					this.axios({
						method: 'post',
						url,
						data: { id },
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success(res.msg);
							this.search();
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				},
			});
		},
		commonConfirm(formName, data, status, dialogName) {
			let url;
			if (status == '1') {
				url = '/dms/moldMaintenanceHall/productConfirm';
			} else if (status == '2') {
				url = '/dms/moldMaintenanceHall/repairConfirm';
			} else if (status == '3') {
				url = '/dms/moldMaintenanceHall/accept';
			}
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.axios({
						method: 'post',
						url,
						data: {
							...this[data],
							id: this.repairId,
						},
					}).then((res) => {
						if (res.code === 200) {
							this[dialogName] = false;
							this.$Message.success(res.msg);
							this.search();
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				}
			});
		},
		// 公用驳回
		handleCommonReject(order, status, key, type) {
			let url,
				desc,
				required = true;
			let data = {};
			if (status == '2') {
				url = '/dms/moldMaintenanceHall/repairReject';
				desc = '模具异常情况描述';
			} else if (status == '3') {
				url = '/dms/moldMaintenanceHall/mQualityReject';
				desc = '驳回原因';
			} else if (status == '3-confirm') {
				url = '/dms/moldMaintenanceHall/mQualityConfirm';
				desc = '品质异常情况描述';
				if (order.abnormalPhenomena.includes('品质异常')) {
					required = true;
				} else required = false;
			}
			this.$refs.inputModal.showModal({
				title: type ? '确认' : '驳回',
				desc,
				required,
				submit: (form) => {
					data[key] = form.value;
					this.axios({
						method: 'post',
						url,
						data: { id: order.id, ...data },
					}).then((res) => {
						if (res.code === 200) {
							this.$Message.success(res.msg);
							this.search();
						} else {
							this.$Message.warning({
								content: res.msg,
								duration: 6,
								closable: true,
							});
						}
					});
				},
			});
		},
		getFactory() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: { level: 3 },
			}).then((res) => {
				if (res.code === 200) {
					const obj = { label: 'name', value: 'id', children: 'children' };
					let list = recursion.convertTree(res.data, obj);

					list.unshift({
						name: this.$t('全部'),
						id: 999,
						children: [],
					});
					this.lineList = list;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		previewClicjk(item, index, arr) {
			this.galleryIndexInfo = index;
			// let arr = this.order.attachmentDTOs1
			this.galleryImagesList = arr.map((val) => {
				if (val.filePath.includes('video')) {
					val.filetype = 'video/mp4';
				}
				if (val.filePath.includes('jpg')) {
					val.filetype = 'image/jpeg';
				}
				return {
					type: val.filetype,
					href: this.util.filePathToUrl(val.filePath),
				};
			});
		},
		/**************基础数据**********************/
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: { level: 0 },
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		getCompanyList() {
			this.axios({
				method: 'get',
				url: '/basic/company/getCompanyListByUser',
				params: {},
			}).then((res) => {
				if (res.code === 200) {
					this.companyList = res.data;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		getCountsList() {
			let params = {};
			if (this.lineType != 999) params.orgId = this.lineType;
			this.axios({
				method: 'get',
				url: '/dms/moldMaintenanceHall/orderStatusCount',
				params: { ...params },
			}).then((res) => {
				if (res.code === 200) {
					let obj = res.data;
					this.labelCount1 = 0;
					this.labelCount2 = 0;
					this.labelCount3 = 0;
					this.labelCount4 = 0;
					this.labelCount5 = 0;
					this.labelCount6 = 0;
					this.labelCount7 = 0;
					this.labelCount8 = 0;
					this.labelCount9 = 0;
					this.labelCount10 = 0;
					this.labelCount11 = 0;
					if (Reflect.has(obj, 1)) {
						this.labelCount1 = obj[1];
					}
					if (Reflect.has(obj, 11)) {
						this.labelCount2 = obj[11];
					}
					if (Reflect.has(obj, 12)) {
						this.labelCount3 = obj[12];
					}
					if (Reflect.has(obj, 4)) {
						this.labelCount4 = obj[4];
					}
					if (Reflect.has(obj, 5)) {
						this.labelCount5 = obj[5];
					}
					if (Reflect.has(obj, 6)) {
						this.labelCount6 = obj[6];
					}
					if (Reflect.has(obj, 7)) {
						this.labelCount7 = obj[7];
					}
					if (Reflect.has(obj, 8)) {
						this.labelCount8 = obj[8];
					}
					if (Reflect.has(obj, 9)) {
						this.labelCount9 = obj[9];
					}
					if (Reflect.has(obj, 10)) {
						this.labelCount10 = obj[10] || 0;
					}

					this.$forceUpdate();
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
		//新增工单
		addOrderClick() {
			this.$refs.addModal.show();
		},
		//刷新
		handleRefresh() {
			this.getList();
			// this.search();
			this.getCountsList();
		},
		brforeDispath(order, status) {
			if (order.workOrderSource === 1) {
				this.beforeRevice(order, status);
			} else {
				this.handleDispath(order, status);
			}
		},
		//分配
		handleDispath(order, status) {
			this.$refs.signleMemberModal.show(order, status);
		},
		//详情
		handleWorkNumDetail(order) {
			// this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
			this.$router.push({
				path: '/moldManagement/moldRepairDetail',
				query: {
					id: order.id,
					status: this.searchParams.maintenanceStatus,
					type: 'view',
				},
			});
		},
		async beforeRevice(order, target) {
			if (order.workOrderSource === 1) {
				// const _checkDeviceStatus = await this.checkDeviceStatus(order.deviceMId)
				// if (_checkDeviceStatus){
				//   this.$refs.commonModal.showModal({
				//     type: "warn",
				//     desc: this.$t('已存在未完工的维修单，是否确认继续接单？'),
				//     submit: () => {
				//       this.$refs.addModal.open(order, target || 'receive', this.$t('填写设备'));
				//     }
				//   })
				// }else{
				this.$refs.addModal.open(order, target || 'receive', this.$t('填写设备'));
				// }
			} else {
				this.handleRecive(order, target);
			}
		},
		checkDeviceStatus(deviceMId) {
			return new Promise((resolve) => {
				this.axios({
					method: 'get',
					url: '/dms/workOrder/checkDeviceInRepair',
					params: {
						deviceMId,
					},
				}).then((res) => {
					if (res.code === 200) {
						resolve(res.data);
					}
				});
			});
		},
		//接
		handleRecive(order, deviceMId) {
			let params = {
				workOrderId: order.id,
				userId: window.localStorage.getItem('ziyunFactoryUserId'),
				workOrderStatus: order.workOrderStatus,
				platform: 1,
			};

			if (deviceMId) {
				params['deviceMId'] = deviceMId;
			}

			this.axios({
				method: 'get',
				url: '/dms/workOrder/receiveOrDistribution',
				params: params,
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({
							content: `${this.$t('common.OrderSuce')}`,
							duration: 6,
							closable: true,
						});
						this.$router.push({
							path: '/fault/statement/workOrderDetail',
							query: {
								id: order.id,
								status: 2,
							},
						});
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					// this.$refs.orderDetailModal.show(order.id, '2')
					// const userId = localStorage.getItem('ziyunFactoryUserId')
				});
		},
		// 确认查看详情
		handleConfirmOrder(order) {
			// this.$refs.orderDetailModal.show(order.id, this.searchParams.status)
			// const userId = localStorage.getItem('ziyunFactoryUserId')
			this.$router.push({
				path: '/moldManagement/moldRepairDetail',
				query: {
					id: order.id,
					status: this.searchParams.maintenanceStatus,
				},
			});
		},
		// 确定工单进入工单大厅
		handleConfirmOk(type) {
			this.repairLoading = true;
			let ajaxParams = {};
			if (this.isOutReject) {
				ajaxParams = {
					url: '/dms/workOrder/outsourcingToConfirm',
					data: { dmsMaintainId: this.repairId, reject: true },
					method: 'post',
				};
			} else if (this.isRepairReject) {
				ajaxParams = {
					url: '/dms/workOrder/rollbackToFaultVerification',
					params: { workOrderId: this.repairId },
					method: 'get',
				};
			} else {
				ajaxParams = {
					url: '/dms/workOrder/passOrRefuse',
					params: { id: this.repairId, type: type },
					method: 'get',
				};
			}
			this.axios({
				...ajaxParams,
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({
							content: `${type === 1 ? '维修确认' : '驳回'}成功！`,
							duration: 6,
							closable: true,
						});
						this.getList();
						this.getCountsList();
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.repairLoading = false;
					this.confirmFaultCodeShowF = false;
					this.backFaultCodeShowF = false;
					this.isRepairReject = false;
				});
		},
		//删除
		handleDeleteModal(item) {
			this.deleteShow = true;
			this.detailId = item.id;
		},
		handleDelete() {
			this.axios({
				method: 'post',
				url: '/dms/moldMaintenanceHall/delete',
				data: {
					id: this.detailId,
				},
			})
				.then((res) => {
					if (res.code === 200) {
						this.$Message.success({
							content: '删除成功',
							duration: 6,
							closable: true,
						});
						this.deleteShow = false;
						this.detailId = '';
						this.getList();
						this.getCountsList();
					} else {
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.repairLoading = false;
					this.confirmFaultCodeShowF = false;
					this.backFaultCodeShowF = false;
				});
		},
		//维修
		handleRepair(id, dialogName) {
			this[dialogName] = true;
			this.repairId = id;
		},
		//驳回
		handleOutsourcingReject(id) {
			this.isOutReject = true;
			this.backFaultCodeShowF = true;
			this.repairId = id;
		},
		handleRepairOutsourcingReject(id) {
			this.isRepairReject = true;
			this.backFaultCodeShowF = true;
			this.repairId = id;
		},
		handleEdit(order) {
			this.$refs.addModal.edit(order, 'edit', this.$t('编辑工单'));
		},
		//驳回
		handleOut(id) {
			this.isOutReject = false;
			this.backFaultCodeShowF = true;
			this.repairId = id;
		},
		changePageSize(val) {
			this.pageSize = val;
			this.getList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.getList();
		},
		reset() {
			let maintenanceStatus = this.searchParams.maintenanceStatus;
			this.searchParams = {
				maintenanceStatus: maintenanceStatus,
			};
			this.search();
		},
		search() {
			this.list = [];
			this.getList();
			this.getCountsList();
		},
		getList() {
			let status = this.searchParams.maintenanceStatus;
			let params = {
				...this.searchParams,
				// orderStatus: [+status],
				// companyId: this.searchParams.companyId,
				// orgId: this.searchParams.orgCode && this.searchParams.orgCode.at(-1),
				// categoryName:
				//   this.searchParams.categoryName &&
				//   this.searchParams.categoryName.replace("类", ""),
				// deviceNo: this.searchParams.deviceNo,
				workShop: this.searchParams.workShop ? this.searchParams.workShop.at(-1) : '',
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				maintenanceStatus: this.searchParams.maintenanceStatus,
			};
			if (this.searchParams.abnormalPhenomena && this.searchParams.abnormalPhenomena) {
				params.abnormalPhenomena = params.abnormalPhenomena.join(',');
			}
			if (status === '2') {
				params.maintainStatus = 0;
			}
			if (status === '3') {
				params.mQualityStatus = 0;
				params.maintenanceStatus = '2';
			}
			// if (status === "10") {
			//   params.orderStatus = [-1];
			// }

			this.loading = true;

			this.axios({
				method: 'post',
				url: '/dms/moldMaintenanceHall/getPage',
				data: params,
			})
				.then((res) => {
					if (res.code === 200) {
						this.list = res.data.records;
						this.total = res.data.total;
					} else {
						this.list = [];
						this.$Message.warning({
							content: res.msg,
							duration: 6,
							closable: true,
						});
					}
				})
				.finally(() => {
					this.loading = false;
				});
		},
		onTabs(val) {
			this.searchParams.maintenanceStatus = val;
			this.pageNum = 1;
			this.getList();
			this.getCountsList();
		},
		loadingWarning() {
			this.$Message.warning(this.$t('message.pleaseWait'));
		},
	},
};
</script>

<style lang="scss" scoped>
.orderList {
	//background: #fff;

	.tabWrap {
		display: flex;
		border-bottom: 1px solid #dcdee2;
		position: relative;

		.loading-bg {
			background: transparent;
			width: calc(100% - 223px);
			height: 100%;
			z-index: 11;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.formWrap {
		::v-deep .ivu-form-item {
			margin-bottom: 0;
		}
	}

	.wrap {
		display: flex;
		flex-wrap: wrap;

		.item {
			width: calc((100% - 64px) / 5);
			margin-top: 15px;
			border-radius: 8px;
			background-color: #fff;
			// overflow: hidden;
			position: relative;
			padding: 0 15px;
			line-height: 24px;
			height: 460px;
			margin-right: 16px;

			&:nth-child(5n + 5) {
				margin-right: 0;
			}

			.topR {
				position: absolute;
				right: 10px;
				top: 10px;
				min-width: 80px;
				height: 50px;

				img {
					width: 100%;
					height: auto;
					overflow: hidden;
				}
			}

			.name {
				position: relative;
				height: 65px;
				line-height: 20px;
				// margin-top: 10px;

				span {
					display: inline-block;
					/*height: 40px;*/
					/*line-height: 40px;*/
					padding: 0 3px;

					&:nth-child(1) {
						color: #333;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 16px;
						/*line-height: 40px;*/
					}

					&:nth-child(2) {
						color: #666;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-size: 12px;
						/*line-height: 40px;*/
					}
				}

				.name-img {
					width: 69px;
					height: 15px;
					display: inline-block;
					margin-right: 25px;

					img {
						width: 100%;
						height: 100%;
						overflow: hidden;
					}
				}
			}

			.details {
				height: 325px;
				// padding-left: 10px;
				background-color: #f8fcff;
				margin-top: 12px;
				border-radius: 3%;
				position: relative;

				.formItem {
					display: flex;
					align-items: center;

					.label {
						width: 80px;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-weight: 400;
						font-style: normal;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 12px;
						color: #888888;
						line-height: 27px;
					}

					.value {
						width: calc(100% - 80px);
						color: #333;
						padding: 0 3px;
						font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
						font-weight: 400;
						font-style: normal;
						font-size: 12px;
					}

					.num {
						color: #187bdb;
						text-decoration: underline;
						cursor: pointer;
					}
				}

				.img {
					position: absolute;
					bottom: 0;
					right: 0;
					font-size: 36px;
				}

				.preview {
					position: absolute;
					right: 0;
					bottom: 62%;
					width: 40px;
					height: 40px;
					background: #eee;

					.preview-img {
						width: 40px;
						height: 40px;
						overflow: hidden;
					}
				}
			}

			.ivu-tag-blue {
				border-color: #f1f7fd;
				border-radius: 24px;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #187bde !important;
			}

			.ivu-tag-volcano {
				border-color: #f1f7fd;
				border-radius: 24px;
				font-weight: 400;
				font-style: normal;
				font-size: 12px;
				color: #187bde !important;
			}

			.ivu-tag-red {
				border-color: #f1f7fd;
				border-radius: 24px;
				color: #187bde !important;
			}

			/deep/ .ivu-tag-blue .ivu-tag-text {
				color: #187bde !important;
				padding: 3px 3px;
			}

			/deep/ .ivu-tag-red .ivu-tag-text {
				color: #e03e55 !important;
				padding: 3px 3px;
			}

			.btnF {
				line-height: 40px;
				position: absolute;
				bottom: 5px;
				right: 10px;

				button {
					margin-left: 5px;
					padding: 0 10px;
				}
			}
		}
	}

	.title {
		display: flex;
		justify-content: space-between;
		font-size: 20px;
		padding: 10px;
		border-bottom: 1px solid #dddddd;

		.icon {
			display: flex;

			.creatBtnright {
				display: flex;
				align-items: center;
				font-size: 16px;

				i {
					font-size: 36px;
				}
			}
		}
	}
}

.over-wrapper {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

::v-deep .tab {
	background-color: #fff;
	height: 50px;
	padding: 10px 50px;
	flex: 1;

	.ivu-tabs-bar {
		padding-left: 30px;
		border-bottom: none;
	}

	.ivu-tabs-tab {
		height: 50px;
		line-height: 50px;
		padding: 0 16px;

		div {
			font-size: 16px;
		}
	}
}

.unreciver {
	position: relative;
	display: inline-block;
	width: 69px;
	height: 35px;
	margin-right: 10px;
	background: inherit;
	background-color: rgba(242, 242, 242, 1);
	border: none;
	border-radius: 5px;
	font-family: 'Arial Normal', 'Arial', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	letter-spacing: normal;
	color: #333333;
	vertical-align: none;
	text-align: center;
	line-height: 35px;
	text-transform: none;

	img {
		position: absolute;
		width: 12px;
		height: 12px;
		top: 23px;
		right: 1px;
	}
}

.black {
	color: #000;
	border-color: #333;
}

.blue {
	background: transparent !important;
	color: #2d8cf0 !important;
}

.red {
	width: calc(100% - 120px);
	color: red;
	padding: 0 3px;
	font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 30px;
}

.green {
	width: calc(100% - 120px);
	color: #31b404;
	padding: 0 3px;
	font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 30px;
}

.yellow {
	width: calc(100% - 120px);
	color: #ffbf00;
	padding: 0 3px;
	font-family: 'MicrosoftYaHei', '微软雅黑', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	line-height: 30px;
}

.backupStatus {
	span {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		display: inline-block;
		margin-right: 5px;
		vertical-align: inherit;
	}

	&.backupStatus1 {
		color: red !important;

		span {
			background: red;
		}
	}

	&.backupStatus2 {
		color: #dfdf3b !important;

		span {
			background: #dfdf3b;
		}
	}

	&.backupStatus3 {
		color: green !important;

		span {
			background: green;
		}
	}
}
/deep/.ivu-tooltip-inner {
	max-width: 700px !important;
}
</style>
<style lang="scss">
@media (max-width: 1600px) and (min-width: 1301px) {
	.orderList .wrap .item {
		width: calc((100% - 48px) / 4) !important;
		margin-right: 16px !important;

		&:nth-child(4n + 4) {
			margin-right: 0 !important;
		}
	}
}

@media (max-width: 1300px) and (min-width: 1000px) {
	.orderList .wrap .item {
		width: calc((100% - 32px) / 3) !important;
		margin-right: 16px !important;

		&:nth-child(3n + 3) {
			margin-right: 0 !important;
		}
	}
}
</style>
